<!-- 商品列表  2017-11-29 新增商品-->
<template>
    <section>
        <!--全部工具条 start -->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;" v-show="visible.allList">
            <el-form :inline="true" :model="allFilters" @submit.native.prevent>
                <el-form-item label="搜索商品">
                    <el-input v-model.trim="allFilters.search" placeholder="请输入商品名称、SKU码或品牌进行搜索"style="width:300px"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-select v-model="allFilters.product_type" placeholder="商品类型">
                        <el-option
                                v-for="(item,index) in typeOptions"
                                :key="index+1"
                                :label="item"
                                :value="index+1">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分类">
                    <el-cascader :options="categoryOptions" :props="categoryProps" v-model="allFilters.categoryIds"
                                 change-on-select></el-cascader>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" v-on:click="handleList('all')" icon="el-icon-search" place>搜索</el-button>


                </el-form-item>
                <el-form-item style="float: right">
                    <router-link to="/product/list/add"  ><el-button type="primary" icon="el-icon-plus" >新增</el-button></router-link>
                </el-form-item>
              <el-form-item style="float: right">
                <el-button type="danger" @click="delProducts" :disabled="this.ids.length === 0" icon="el-icon-delete">删除</el-button>
              </el-form-item>
              <el-form-item style="float: right">
                <el-button type="success" @click="resetSearch" icon="el-icon-refresh">重置</el-button>
              </el-form-item>

            </el-form>
        </el-col>
        <!--全部工具条 end -->

        <!--上架工具条 start -->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;" v-show="visible.onList">
            <el-form :inline="true" :model="onFilters">
                <el-form-item label="搜索商品">
                    <el-input v-model="onFilters.search" placeholder="请输入商品名称、SKU码或品牌进行搜索"style="width:300px"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-select v-model="onFilters.product_type" placeholder="商品类型">
                        <el-option
                                v-for="(item,index) in typeOptions"
                                :key="index+1"
                                :label="item"
                                :value="index+1">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分类">
                    <el-cascader :options="categoryOptions" :props="categoryProps" v-model="onFilters.categoryIds"
                                 change-on-select></el-cascader>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="handleList('on')" icon="el-icon-search" place>搜索</el-button>
                </el-form-item>
                <el-form-item style="float: right">
                    <router-link to="/product/list/add"  ><el-button type="primary" ><i class="el-icon-plus"></i></el-button></router-link>
                </el-form-item>
            </el-form>
        </el-col>
        <!--上架工具条 end -->

        <!--下架工具条 start -->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;" v-show="visible.offList">
            <el-form :inline="true" :model="offFilters">
                <el-form-item label="搜索商品">
                    <el-input v-model="offFilters.search"  placeholder="请输入商品名称、SKU码或品牌进行搜索" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-select v-model="offFilters.product_type" placeholder="商品类型">
                        <el-option
                                v-for="(item,index) in typeOptions"
                                :key="index+1"
                                :label="item"
                                :value="index+1">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分类">
                    <el-cascader :options="categoryOptions" :props="categoryProps" v-model="offFilters.categoryIds"
                                 change-on-select></el-cascader>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="handleList('off')" icon="el-icon-search" place>搜索</el-button>
                </el-form-item>
                <el-form-item style="float: right">
                    <router-link to="/product/list/add"  ><el-button type="primary" ><i class="el-icon-plus"></i></el-button></router-link>
                </el-form-item>

            </el-form>
        </el-col>
        <!--下架工具条 start -->

        <!--tab栏 start-->
        <el-col>
            <template>
                <el-tabs v-model="tab" type="card" @tab-click="handleTagClick">
                    <el-tab-pane name="all">
                        <span slot="label">
                            全部商品(<span style="color: red">{{total.all}}</span>)
                        </span>
                    </el-tab-pane>
                    <el-tab-pane name="on">
                             <span slot="label">
                            已上架(<span style="color: red">{{total.on}}</span>)
                        </span>
                    </el-tab-pane>
                    <el-tab-pane name="off">
                             <span slot="label">
                            已下架(<span style="color: red">{{total.off}}</span>)
                        </span>
                    </el-tab-pane>
                </el-tabs>
            </template>
        </el-col>
        <!--tab栏 end-->
        <!--全部商品列表 start-->
        <el-table :data="allList" highlight-current-row v-loading="visible.listLoading" @selection-change="selectProducts"
                  style="width: 100%;" v-show="visible.allList">
            <el-table-column type="selection" width="100">
            </el-table-column>
            <el-table-column prop="fullImage" label="商品主图">
                <template  slot-scope="scope">
                    <img :src="scope.row.fullImage" class="main-image"/>
                </template>
            </el-table-column>
            <el-table-column prop="children" label="SKU码" :formatter="skuFormatter">

            </el-table-column>
            <el-table-column prop="product_name" label="商品名称">
            </el-table-column>
            <el-table-column prop="brand.brand_name" label="品牌名称">
            </el-table-column>
            <el-table-column prop="product_price" label="商品售价">
            </el-table-column>
            <el-table-column prop="children" label="库存" :formatter="sumQuantity">
            </el-table-column>
            <el-table-column label="操作" width="300">
                <template  slot-scope="scope">
                    <router-link :to="'/product/list/detail/'+scope.row.product_id">详情</router-link>
                </template>
            </el-table-column>
        </el-table>
        <!--全部商品列表 end-->

        <!-- 上架商品列表 start-->
        <el-table :data="onList" highlight-current-row v-loading="visible.listLoading" @selection-change="selectProducts"
                  style="width: 100%;" v-show="visible.onList">
            <el-table-column type="selection" width="100">
            </el-table-column>
            <el-table-column prop="fullImage" label="商品主图">
                <template slot-scope="scope">
                    <img :src="scope.row.fullImage" class="main-image"/>
                </template>
            </el-table-column>
            <el-table-column prop="children" label="SKU码" :formatter="skuFormatter">

            </el-table-column>
            <el-table-column prop="product_name" label="商品名称">
            </el-table-column>
            <el-table-column prop="brand.brand_name" label="品牌名称">
            </el-table-column>
            <el-table-column prop="product_price" label="商品售价">
            </el-table-column>
            <el-table-column prop="children" label="库存" :formatter="sumQuantity">
            </el-table-column>
            <el-table-column label="操作" width="300">
                <template  slot-scope="scope">
                    <router-link :to="'/product/list/detail/'+scope.row.product_id">详情</router-link>
                </template>
            </el-table-column>
        </el-table>
        <!--上架商品列表 end-->

        <!-- 下架商品列表 start-->
        <el-table :data="offList" highlight-current-row v-loading="visible.listLoading" @selection-change="selectProducts"
                  style="width: 100%;" v-show="visible.offList">
            <el-table-column type="selection" width="100">
            </el-table-column>
            <el-table-column prop="fullImage" label="商品主图">
                <template  slot-scope="scope">
                    <img :src="scope.row.fullImage" class="main-image"/>
                </template>
            </el-table-column>
            <el-table-column prop="children" label="SKU码" :formatter="skuFormatter">

            </el-table-column>
            <el-table-column prop="product_name" label="商品名称">
            </el-table-column>
            <el-table-column prop="brand.brand_name" label="品牌名称">
            </el-table-column>
            <el-table-column prop="product_price" label="商品售价">
            </el-table-column>
            <el-table-column prop="children" label="库存" :formatter="sumQuantity">
            </el-table-column>
            <el-table-column label="操作" width="300">
                <template  slot-scope="scope">
                    <router-link :to="'/product/list/detail'+scope.row.product_id">详情</router-link>
                </template>
            </el-table-column>
        </el-table>
        <!-- 下架商品列表 end-->

        <!-- 全部订单分页 start-->
        <el-col :span="24" class="toolbar" v-show="visible.allList">
            <!--<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
            <el-pagination layout="total, sizes, prev, pager ,next" :page-size="allFilters.pageSize"
                           @current-change="handleAllPageChange" @size-change="handleAllSizeChange" :total="total.all">
            </el-pagination>
        </el-col>
        <!-- 全部订单分页 end -->

        <!-- 全部订单分页 start-->
        <el-col :span="24" class="toolbar" v-show="visible.onList">
            <!--<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
            <el-pagination layout="total, sizes, prev, pager ,next" :page-size="onFilters.pageSize"
                           @current-change="handleOnPageChange" @size-change="handleOnSizeChange" :total="total.on">
            </el-pagination>
        </el-col>
        <!-- 全部订单分页 end -->

        <!-- 全部订单分页 start-->
        <el-col :span="24" class="toolbar" v-show="visible.offList">
            <!--<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
            <el-pagination layout="total, sizes, prev, pager ,next" :page-size="offFilters.pageSize"
                           @current-change="handleOffPageChange" @size-change="handleOffSizeChange" :total="total.off">
            </el-pagination>
        </el-col>
        <!-- 全部订单分页 end -->

    </section>
</template>

<script>
  import {getProductList, getCategories, addProduct} from '../../api/api';
  export default {
    data () {
      return {
        ids: [],
        categoryOptions: [],
        categoryProps: {
          value: 'category_id',
          label: 'category_name',
          children: 'children'
        },
        tab: '',
        total: {
          all: 0,
          off: 0,
          on: 0
        },
        children: [],
        tabLabel: {
          all: '全部商品',
          on: '已上架',
          off: '已下架'
        },
        allFilters: {
          search: '',
          product_type: '',
          expand: 'brand,children',
          pageSize: 10,
          categoryIds: []
        },
        onFilters: {
          search: '',
          product_type: '',
          expand: 'brand,children',
          pageSize: 10,
          product_status: 1,
          categoryIds: []
        },
        offFilters: {
          search: '',
          product_type: '',
          expand: 'brand,children',
          pageSize: 10,
          product_status: 0,
          categoryIds: []
        },
        allList: [],
        onList: [],
        offList: [],
        visible: {
          listLoading: false,
          allList: true,
          onList: false,
          ofList: false,
          quantity: false
        }
      };
    },
    computed: {
      typeOptions () {
        return this.$store.getters.productType;
      }
    },
    methods: {
      // 重置
      resetSearch () {
        this.allFilters = {
          search: '',
          product_type: '',
          expand: 'brand,children',
          pageSize: 10,
          categoryIds: []
        }
        this.visible.listLoading = true
        getProductList(this.allFilters).then(res => {
          if (parseInt(res.status) === 1) {
            this.allList = res.data
            this.total.all = res.totalCount
          }
          this.visible.listLoading = false
        })
      },
      // 选择商品时触发
      selectProducts (rows) {
        this.ids = []
        for (let row of rows) {
          this.ids.push(row.product_id)
        }
      },
      // 批量删除
      delProducts () {
        this.$confirm('确认删除选中商品吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.visible.listLoading = true
          // NProgress.start();
          let para = {}
          para.ids = this.ids
          addProduct(para).then((res) => {
            // NProgress.done();
            if (parseInt(res.status) === 1) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
            } else {
              this.$alert('删除失败', '失败', {type: 'error'})
            }
            this.handleList('all')
          })
        }).catch(() => {
        })
      },
      handleCategories () {
        getCategories({category_level: 1}).then(res => {
          this.categoryOptions = res.data;
        });
      },
      handleTagClick (tag) {
        switch (tag.name) {
        case 'all':
          this.visible.allList = true;
          this.visible.onList = false;
          this.visible.offList = false;
          break;
        case 'on':
          this.visible.allList = false;
          this.visible.onList = true;
          this.visible.offList = false;
          break;
        case 'off' :
          this.visible.allList = false;
          this.visible.onList = false;
          this.visible.offList = true;
          break;
        }
      },
      handleAllSizeChange (size) {
        this.allFilters.pageSize = size;
        this.handleList('all');
      },
      handleOnSizeChange (size) {
        this.onFilters.pageSize = size;
        this.handleList('on');
      },
      handleOffSizeChange (size) {
        this.offFilters.pageSize = size;
        this.handleList('off');
      },
      handleAllPageChange (page) {
        this.allFilters.page = page;
        this.handleList('all');
      },
      handleOnPageChange (page) {
        this.onFilters.page = page;
        this.handleList('on');
      },
      handleOffPageChange (page) {
        this.offFilters.page = page;
        this.handleList('off');
      },

      handleList (type) {
        this.visible.listLoading = true
        switch (type) {
        case 'all':
          getProductList(this.allFilters).then(res => {
            if (parseInt(res.status) === 1) {
              this.allList = res.data
              this.total.all = res.totalCount
            } else {
              this.$message.error('获取列表失败，错误代码为：' + res.errorCode)
            }
            this.visible.listLoading = false
          })
          break
        case 'off':
          getProductList(this.offFilters).then(res => {
            if (parseInt(res.status) === 1) {
              this.offList = res.data
              this.total.off = res.totalCount
            } else {
              this.$message.error('获取列表失败，错误代码为：' + res.errorCode)
            }
            this.visible.listLoading = false
          })
          break
        case 'on':
          getProductList(this.onFilters).then(res => {
            if (parseInt(res.status) === 1) {
              this.onList = res.data
              this.total.on = res.totalCount
            } else {
              this.$message.error('获取列表失败，错误代码为：' + res.errorCode)
            }
            this.visible.listLoading = false
          })
          break
        }
      },
      // 将sku码组成字符串
      skuFormatter (row) {
        let skuArr = [];
        for (let {sku} of row.children) {
          skuArr.push(sku);
        }
        return skuArr.join(',');
      },
      // 计算库存
      sumQuantity (row) {
        let sum = 0;
        for (let {quantity} of row.children) {
          sum += parseInt(quantity);
        }
        return sum;
      }
    },
    mounted () {
      this.handleList('all');
      this.handleList('on');
      this.handleList('off');
      this.handleCategories();
    },
    watch: {}
  };
</script>

<style scoped rel="stylesheet/sass" lang="sass">
    a
        color: #62b8ff
        cursor: pointer
        margin-right: 20px
    .main-image
        width: 50px
        height: 50px
</style>
